<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in data" :key="index">
                <img :src="img" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
window.onload = function() {
    var mySwiper = $('.swiper-container').swiper({
        loop: true,
        direction: 'horizontal',
    });
}

  export default {
    props:['data'],
    mounted(){
        this.initSwiper()
    },
    methods:{
        // 初始化轮播图
        initSwiper(){
            setTimeout(()=>{
                var mySwiper = new Swiper ('.swiper-container', {
                    loop: true,
                    direction:"horizontal",
                    speed:500,
                    autoplay :{
                        //防止拖拽后无法自动滑动
                        disableOnInteraction:false,
                        delay:4000
                    },
                    //防止拖拽后无法自动滑动
                    observer:true,
                    observeParents:true,
                    observeSlideChildren:true,
                    })  
            },300)

        }
    }
  };
</script>
<style scoped>
 .swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
.swiper-slide{
    width: 100%;
    height: 70vh;
    margin-top: 1em;
    box-shadow: 1px 1px 1px #eee;
    
}
.swiper-slide img{
    border-radius: .5em;
}
</style>